<script type="text/javascript">
    $(document).ready(function() {
        // date picker
        $(".tanggal").datepicker({ 
            target: 'tanggal',
            changeMonth: true,
            changeYear: true,
            showOn: 'both',
            buttonImage: '{$BASEURL}/resource/doc/images/icon/calendar.gif',
            buttonImageOnly: true,
            dateFormat: 'yy-mm-dd'
        });
        
        $('#date-picker').change(function(){
            hitung_masa_penyusutan();
        });
        
        // hitung masa berlaku
        function hitung_masa_penyusutan(){
            // ajax loader
            $("#loader").ajaxStart(function(){
                $('#expired_date_label').hide();
                $(this).show();
            });
            $("#loader").ajaxStop(function(){
                $(this).hide();
                $('#expired_date_label').show();
            });
            // input
            var tanggal = $( "#date-picker" ).val();
            var jumlah = $( "#expired_value" ).val();
            var periode = $( "#periode_id" ).val();
            // ajax
            $.ajax({
                type:'POST',
                data:'jumlah='+jumlah+'&tanggal='+tanggal+'&periode='+periode,
                url:'{$config->site_url("inventarisasi/penyusutan/hitung_masa_penyusutan")}',
                success : function(result){
                    $('#expired_date').val(result);
                    $('#expired_date_label').text(result);
                }
            });
        }
    });
</script>
<div class="breadcrum">
    <p>
        <a href="#">Inventarisasi</a>
        <span></span><a href="{$config->site_url('inventarisasi/pengadaan')}">Pengadaan</a>
        <span></span><small>Tambah</small>
    </p>
    <div class="clear"></div>
</div>  
<div class="sub-content">  
    <div class="navigation">  
        <div class="navigation-button">
            <ul>
                <li><a href="{$config->site_url('inventarisasi/penyusutan/add')}"><img alt="" src="{$BASEURL}/resource/doc/images/icon/add-icon.png">Penyusutan</a></li>
                <li><a href="{$config->site_url('inventarisasi/penyusutan')}"><img alt="" src="{$BASEURL}/resource/doc/images/icon/icon.notes.blue.png">Daftar Data</a></li> 
            </ul>
            <div class="clear"></div>
        </div>
    </div> 
    <!-- notification template -->
    {include file="base/templates/notification.html"}
    <!-- end of notification template--> 
    <form action="{$config->site_url('inventarisasi/penyusutan/penyusutan_add')}" method="post" enctype="multipart/form-data">
        <table width="100%" class="table-input">
            <tbody>
                <tr class="headrow">
                    <th colspan="2">Hitung Penyusutan</th>
                </tr>  
                <tr>
                    <td width="20%">Periode penyusutan</td>
                    <td> 
                        <input id="date-picker" type="text" class="tanggal" size="10" name="penyusutan_tgl_tmp" value="{$result.penyusutan_tgl_tmp|default:''}"  readonly="readonly" /> 
                        <img src="{$BASEURL}resource/doc/images/ajax-loader-small.gif" align="middle" alt="" id="loader" style="display: none;" /> 
                    </td>   
                </tr>
                <tr>
                    <td width="20%"></td>
                    <td> 
                        <input id="expired_date" type="hidden" name="penyusutan_tgl" value="{$result.penyusutan_tgl|default:''}" />
                        <b id="expired_date_label" style="color: red;">&nbsp;{$result.tgl_penyusutan|default:''}</b> 
                    </td>   
                </tr>
                <tr>
                    <td>Keterangan</td>
                    <td>
                        <textarea name="penyusutan_keterangan" cols="50" rows="3">{$result.penyusutan_keterangan|default:''}</textarea>
                    </td>  
                </tr>
                <tr class="submit-box">
                    <td colspan="3">
                        <input type="submit" class="edit-button" value="Simpan" name="save[insert]">
                        <input type="reset" class="edit-button" value="Reset" name="save[reset]">
                    </td>
                </tr>
            </tbody>
        </table>
    </form> 
</div>